<template>
    <div class="history-detail" v-if="detail">
        <div class="form-item">
            <div class="items">
                <div class="label">预约人姓名</div>
                <div class="content">
                    {{detail.name}}
                </div>
            </div>
            <div class="items">
                <div class="label">预约人身份证</div>
                <div class="content">{{detail.cardId}}</div>
            </div>
            <div class="items">
                <div class="label">下单时间</div>
                <div class="content">{{detail.orderTime}}</div>
            </div>
            <div class="items">
                <div class="label">自提网点</div>
                <div class="content">{{detail.sname}}</div>
            </div>
            <div class="items">
                <div class="label">网点地址</div>
                <div class="content">{{detail.siteAddress}}</div>
            </div>
            <div class="items">
                <div class="label">可取货时间</div>
<!--                <div class="content">{{detail.appointTime}}</div>-->
                <div class="content" v-html="detail.appointTime" style="white-space: pre-line;"></div>
            </div>
            <div class="items">
                <div class="label">取货时间</div>
                <div class="content">{{detail.receiveTime || '-'}}</div>
            </div>
        </div>
        <div class="state form-item">
            <div class="items">
                <div class="label">取货状态</div>
                <!--                <div class="content finish">已取货</div>-->
                <div class="content" :class="infoState.class">{{infoState.name}}
                </div>
            </div>
        </div>
        <div class="code-view">
            <div class="title">取货码</div>
            <div class="code">
                <el-image
                    :src="'/_api'+detail.qrcodePath"
                    class="img">
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>
            <div class="tips">网点取货时，请出示二维码和身份证</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                detail: null,
                id: null
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            this.getDetail()
        },
        computed: {
            infoState() {
                let state = {
                    class: '',
                    status: null,
                    name: ''
                }
                if (this.detail) {
                    if (Number(this.detail.receiveStatus) === 2) {
                        state = {
                            status: 1,
                            class: 'finish',
                            name: '已取货'
                        }
                    } else {
                        if (Number(this.detail.orderStatus) === 1) {
                            state = {
                                status: 2,
                                class: 'disable',
                                name: '已过期'
                            }
                        } else {
                            state = {
                                status: 0,
                                class: '',
                                name: '未取货'
                            }
                        }
                    }
                }
                return state
            }
        },
        methods: {
            getDetail() {
                this.$http.get('/orderRecord/getRecordInfoById', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .history-detail {
        .state {
            margin-top: .15rem;

            .items {
                line-height: .48rem;

                .content {
                    font-size: .32rem;
                    font-weight: bolder;
                    color: #f2b75d;

                    &.finish {
                        color: #00bf53;
                    }

                    &.disable {
                        color: #333;
                        border-color: #333;
                    }
                }
            }

        }

        .code-view {
            text-align: center;
            margin-top: .15rem;
            background-color: #fff;
            padding: .3rem;

            .title {
                font-size: .3rem;
            }

            .code {
                width: 40vw;
                height: 40vw;
                margin: .3rem auto;

                .img {
                    width: 100%;
                    height: 100%;
                }
            }

            .tips {
                color: #999;
            }
        }
    }
</style>
